<template>
  <div class="main-app-s">
    <div class="layout-content auto-scroll">
      <RouterView />
    </div>
    <Tabbar @tab-switch="tabSwitch">
      <TabbarItem tab-title="首页" icon="home"></TabbarItem>
      <TabbarItem tab-title="分类" icon="category"></TabbarItem>
      <TabbarItem tab-title="发现" icon="find"></TabbarItem>
      <TabbarItem tab-title="购物车" icon="cart"></TabbarItem>
      <TabbarItem tab-title="我的" icon="my"></TabbarItem>
    </Tabbar>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import {  Tabbar , TabbarItem   } from '@nutui/nutui';
import { useRouter } from "vue-router";
export default defineComponent({
  name:"layout",
  components:{
    Tabbar , TabbarItem
  },
  setup(){
    const router = useRouter();
    const path:string[] = [
        "home","category","find","cart","my"
    ]

    const tabSwitch = (item, index)=> {
      console.log( item );
      router.push({ path:  "/"+path[index] });
    }

    return {
      tabSwitch
    }
  }

})


</script>
<style scoped lang="scss">
.layout-content{
  height: calc(100vh - 52px);
  background: white;
}
</style>
